<template>
  <el-cascader
    :value="value"
    :options="deptData"
    :props="props"
    separator="-"
    size="small"
    style="width: 300px;"
    @change="changeValue">
  </el-cascader>
</template>

<script>
  import { getDepartment } from '@/api/department'
  import { transListToTreeData } from '@/utils'
  export default {
    name: 'CascadeSelect',
    props: {
      // 部门架构的列表数据
      value: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        deptData: [],
        props: {
          label: 'name', // 要展示的名称字段
          value: 'id'  // 选择对应项后收集的数据
        }
      }
    },
    methods: {
      async getDepartment () {
        // 获取部门架构列表的数组对象数据，并转化为树形结构的数组对象
        const result = await getDepartment()
        this.deptData = transListToTreeData(result, 0)
      },
      changeValue(list) {
        // 自动传递进来的形参是一个数组，里面的元素分别是修改当前节点后的每一级选择的value值，这里是id
        if (list.length > 0) {
          this.$emit('input', list[list.length - 1])
        } else {
          this.$emit('input', null)  // 长度为0 说明未选择，给一个空值
        }
      }
    },
    created() {
      this.getDepartment()
    }
  }
</script>

<style>
</style>